<template>
  <div>
    <!-- 头部 -->
    <van-cell title="房屋列表">
      <span @click="$router.push('/home/wholerent')">更多房源</span>
    </van-cell>
    <!-- /头部 -->
    <!-- 房屋展示列表 -->
    <van-card
      v-for="(item, index) in houses"
      :key="index"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="`http://liufusong.top:8080${item.houseImg}`"
    >
      <template #tags>
        <van-tag
          plain
          type="danger"
          class="tags"
          v-for="(tagItem, index) in item.tags"
          :key="index"
          >{{ tagItem }}</van-tag
        >
      </template>
    </van-card>
    <!-- /房屋展示列表 -->
  </div>
</template>

<script>
import { queryHouseApi } from '@/api'
export default {
  name: '',
  components: {},
  props: {
    // 要展示房源的区域value值
    lastCitiesValue: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      houses: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getHouseList()
  },
  methods: {
    async getHouseList() {
      this.$toast.loading({
        message: '房源详细信息正在加载中...',
        position: 'bottom',
        duration: 0
      })
      const { data } = await queryHouseApi({
        cityId: this.lastCitiesValue
      })
      console.log('房屋列表:', data)
      this.houses = data.body.list
    }
  }
}
</script>

<style scoped lang="less">
.van-cell {
  position: relative;
  width: 100%;
  height: 120px;
  background: #c0c0c2;
  border-top: 1px solid #c8c8c8;
  line-height: 85px;
}

:deep(.van-card__title) {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #394043;
}
:deep(.van-card__desc) {
  font-size: 24px;
  color: #afb2b3;
}
.tags {
  color: #39becd;
  background: #e1f5f8;
}
.van-card__price {
  font-size: 12px;
  color: #fa5741;
}
</style>
